<template>
  <scroll-view :scroll-y="true" class="flow-box-scroll" :style="setHeight()" @scrolltolower="getTableList('up')">
    <view class="flow-box">
      <view class="flow-box-row" v-for="(item, index) of tableData" :key="index" @tap="skip(item)">
        <!-- <image class="image" mode="scaleToFill" :src="item.image"></image> -->
        <view class="image artistic-text"> {{ item.modelName || item.modelFlag }} </view>
        <view class="content">
          <view class="title multi-line-ellipsis">{{ item.title1 || item.modelFlag }}</view>
          <view class="price" v-if="isCount">
            <text class="iconfont icon-yushouhuore"></text>
            <!-- <uni-icons type="contact" size="15" color="#EE6B54"></uni-icons> -->
            {{ item.payCount }}
          </view>
        </view>
      </view>
    </view>
    <uni-load-more :status="loadStatus" v-if="tableData.length > minLength" :content-text="contentText"></uni-load-more>
  </scroll-view>
</template>
<script setup lang="ts">
import { useTable } from "./hooks/use-table.ts";

interface ScrollViewListProps {
  params?: any;
  url?: string;
  minLength?: number;
  height?: string;
  otherHeight?: number;
  initParams: any;
  requestAuto?: boolean;
  api?: Function;
  isPageable?: boolean;
  isCount?: boolean;
}

const contentText = {
  contentdown: "下拉加载更多",
  contentrefresh: "正在加载...",
  contentnomore: "没有更多数据了"
};

const { tableData, loadStatus, getTableList } = useTable(props.api, props.initParams, props.isPageable);

const props = withDefaults(defineProps<ScrollViewListProps>(), {
  flowList: [],
  url: "",
  params: {},
  minLength: 8,
  isPageable: true,
  requestAuto: false,
  isCount: true
});

const search = () => {
  console.log("查========================", props.params);

  if (typeof props.api === "function" && props.requestAuto) {
    console.log("查=1=======================");

    getTableList();
  }
};

onLoad(() => search());

const skip = item => {
  uni.navigateTo({
    url: routerTransitionParams(props.params, props.url, item)
  });
};

const setHeight = () => {
  if (props.height) {
    return {
      height: props.height
    };
  } else {
    return {
      height: `calc(100vh - ${props.otherHeight || 40}px)`
    };
  }
};

defineExpose({
  getTableList
});
</script>
<style lang="scss" scoped src="./index.scss"></style>
